{$layout}

<first-menu class="second-menu">
	<a href="" class="item" @click.prevent="createNode()">[添加节点]</a>
    <a href="/settings/api/methodStats" class="item" v-if="hasMethodStats">用时统计</a>
</first-menu>

<p class="comment" v-if="nodes.length == 0">暂时还没有节点。</p>

<div class="table-box">
    <table class="ui table selectable celled" v-if="nodes.length > 0">
        <thead>
            <tr>
                <th>节点名称</th>
                <th>GRPC访问地址</th>
                <th>HTTP访问地址</th>
                <th class="width6 center">版本号</th>
                <th class="width5 center">CPU</th>
                <th class="width5 center">内存</th>
                <th class="center width10">状态</th>
                <th class="two op">操作</th>
            </tr>
        </thead>
        <tr v-for="node in nodes">
            <td><a :href="'/settings/api/node?nodeId=' + node.id">{{node.name}}</a>
                <div v-if="node.isPrimary">
                    <grey-label v-if="node.isPrimary">主节点</grey-label>
                </div>
                <div v-if="node.status != null && node.status.shouldUpgrade">
                    <span class="red small">v{{node.status.buildVersion}} -&gt; v{{node.status.latestVersion}}<br/><a href="" v-if="node.status.canUpgrade" @click.prevent="upgradeNode(node.id)">[远程升级]</a> </span>
                </div>
            </td>
            <td>
                <div v-if="node.accessAddrs != null && node.accessAddrs.length > 0">
                    <div v-for="addr in node.accessAddrs">
                        <span class="ui label tiny basic" style="margin-bottom: 0.5em">{{addr}}</span>
                    </div>
                </div>
                <div v-else class="disabled">-</div>
            </td>
            <td>
                <div v-if="node.restAccessAddrs != null && node.restAccessAddrs.length > 0">
                    <div v-for="addr in node.restAccessAddrs">
                        <span class="ui label tiny basic" style="margin-bottom: 0.5em">{{addr}}</span>
                    </div>
                </div>
                <div v-else class="disabled">-</div>
            </td>
            <td class="center">
                <span v-if="node.status.buildVersion.length > 0">v{{node.status.buildVersion}}</span>
                <span v-else class="disabled">-</span>
            </td>
            <td class="center">
                <span v-if="node.status.isActive" :class="{red:node.status.cpuUsage > 0.80}">{{node.status.cpuUsageText}}</span>
                <span v-else class="disabled">-</span>
            </td>
            <td class="center">
                <span v-if="node.status.isActive" :class="{red:node.status.memUsage > 0.80}">{{node.status.memUsageText}}</span>
                <span v-else class="disabled">-</span>
            </td>
            <td class="center">
                <span v-if="!node.isOn"><label-on :v-is-on="node.isOn"></label-on></span>
                <div v-else-if="node.status.isActive">
                    <span class="green">运行中</span>
                </div>
                <span v-else-if="node.status.updatedAt > 0" class="red">已断开</span>
                <span v-else-if="node.status.updatedAt == 0" class="red">未连接</span>
            </td>
            <td>
                <a :href="'/settings/api/node?nodeId=' + node.id">详情</a> &nbsp;
                <a href="" @click.prevent="deleteNode(node.id)">删除</a>
            </td>
        </tr>
    </table>
</div>

<div class="page" v-html="page"></div>